<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-table :data="rightList" stripe border style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="index" label="#" width="50" />
                <el-table-column prop="authName" label="权限名称" min-width="150" />
                <el-table-column prop="path" label="路径" min-width="200" />
                <el-table-column prop="level" label="权限等级" min-width="120">
                    <template #default="scope">
                        <el-tag v-if="scope.row.level === 0" type="success">一级权限</el-tag>
                        <el-tag v-if="scope.row.level === 1" type="warning">二级权限</el-tag>
                        <el-tag v-if="scope.row.level === 2" type="danger">三级权限</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import { ref } from "vue"
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from "@/utils/http"

const rightList = ref([])

const getRightsList = async () => {
    const { data: res } = await axios.get('/rights/list/')
    if (res.code !== 200) {
        return ElMessage.error(res.message)
    }
    rightList.value = res.data
}

onMounted(() => {
    getRightsList()
})
</script>
